<template>
    <view class="bg-white">
        <u-cell-group>
            <u-cell title="头像">
                <template #value>
                    <uploadAvatar
                        v-if="userInfo?.avatar"
                        :modelValue="getUrl(userInfo?.avatar)"
                        fileKey="url"
                        :round="true"
                        @update:modelValue="handleAvatarChange"
                    />
                </template>
            </u-cell>
            <u-cell title="账号" :value="userInfo.account" />
            <u-cell
                title="昵称"
                :value="userInfo.nickname"
                :isLink="true"
                @click="jumpClick('/pages/user/update_nickname')"
            />
            <u-cell
                title="手机号"
                :value="userInfo.mobile"
                :isLink="true"
                @click="jumpClick('/pages/user/update_mobile')"
            />
            <u-cell
                title="邮箱"
                :value="userInfo.email"
                :isLink="true"
                @click="jumpClick('/pages/user/update_email')"
            />
            <u-cell
                title="性别"
                :value="getSex"
                :isLink="true"
                @click="jumpClick('/pages/user/update_sex')"
            />
        </u-cell-group>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import useUserStore from "@/stores/user";
import { storeToRefs } from "pinia";
import { useRoute } from "@/hooks/useRoute";
import { getUrl } from "@/utils/common";
import { getUserInfo } from "@/api/user";

const userStore = useUserStore();
const { isLogin } = storeToRefs(userStore);

const userInfo = ref(<any>{});

const getSex = computed(() => {
    let value = "";
    switch (userInfo.value.sex) {
        case 1:
            value = "男";
            break;

        case 2:
            value = "女";
            break;

        default:
            value = "未知";
            break;
    }
    return value;
});

const handleAvatarChange = (value) => {
    userInfo.value.avatar = value;
};

const getUserData = async () => {
    if (isLogin.value) {
        const res = await getUserInfo();
        userInfo.value = res;
    }
};

const jumpClick = (url) => {
    useRoute().jumpTo({ url: url });
};

getUserData();
</script>

<style lang="scss" scoped></style>
